<template>
  <div class="index-container">
    <van-nav-bar title="热力榜单" left-arrow @click-left="onClickLeft" ref="nav" />
    <div class="warpper" v-bind:style="{ marginTop: `${navBarHeight}px` }">
      <div class="headerBackground">
        <div class="headerContainer">
          <div class="header">
            <div class="businessContainer">
              <img src="../../assets/img/hot/triangle2.png" alt="" />
              <div class="desc">{{info.name}}</div>
            </div>
            <div class="hotContainer">
              <div class="hot-number">
                <div class="">{{info.heat_num}}</div>
                <div class="desc on">热力值</div>
              </div>
            </div>
          </div>
        </div>
        <div class="hot-tip" @click="getShow">
          <img src="../../assets/img/game/资源53.png" />
        </div>
      </div>
      <div class="content">
<!--        <div class="cell">-->
<!--          <div class="cell-title">作品数</div>-->
<!--          <div class="cell-value">{{info.works_num}}个</div>-->
<!--        </div>-->

        <div class="cell">
          <div class="cell-title">大众投票总获票数</div>
          <div class="cell-value">{{info.total_vote}}票</div>
        </div>

        <div class="cell">
          <div class="cell-title">决赛获奖数</div>
          <div class="cell-value">{{info.prize_num}}个</div>
        </div>

        <div class="cell">
          <div class="cell-title">决赛直播活跃度</div>
          <div class="cell-value">{{info.total_likes}}赞</div>
        </div>

        <div class="cell">
          <div class="cell-title">组织率</div>
          <div class="cell-value">{{info.group_rate}}%</div>
        </div>
      </div>
      <van-popup v-model="isShow">
        <div class="search-popup">
          <div class="title">
            <div>
              1、大众投票获票情况：本单位作品总得票数/本赛区单位最高总得票数*20分
            </div>
            <div>
              2、决赛获赞数：各区决赛直播时单位选手获得的总点赞数/本场决赛直播时单位选手获得的最高总点赞数*20分
            </div>
            <div>
              3、决赛获奖数：本单位决赛获奖数/本场决赛单位最高获奖数*20分
            </div>
            <div>
              4、组织率：包括组织程序、组织现场、组织效果与组织报道，由总行工会通过稿件图文、考勤率等记录，统计、评定各单位工会的总体组织情况后，给出组织得分，满分为40分，维度如下：
                <div class=""> 文章投稿数：10分</div>
                <div class="">报道字数、图片：10分</div>
                <div class=""> 考勤率：10分</div>
                <div class=""> 领导参与：10分</div>
            </div>
          </div>
          <div class="confirm" @click="getShow">确定</div>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
import { getBankDetails } from '@/api/user.js'
export default {
  data() {
    return {
      isShow: false,
      navBarHeight: 0,
      id: '',
      info: {}
    }
  },
  created() {
    this.id = this.$route.query.id
    this.getDetails()
  },
  mounted() {
    this.navBarHeight = this.$refs.nav.$el.offsetHeight // 获取组件元素高度
  },
  methods: {
    // 获取榜单详情
    getDetails() {
      const param = {
        id: this.id
      }
      getBankDetails(param).then((res) => {
        if (res.code === 200) {
          const datas = res.data
          this.info = datas
        }
      })
    },
    onClickLeft() {
      this.$router.go(-1)
    },
    getShow() {
      this.isShow = !this.isShow
    }
  }
}
</script>

<style lang='scss' scoped>
.headerBackground {
  height: 132px;
  background: linear-gradient(100deg, #E71C5B 0%, #F9364B 20.98%, #FB7043 47.69%, #FFC355 90.55%, #8FEB96 100.39%);
  display: flex;
  position: relative;
}

.headerContainer {
  padding: 20px 37px;
  width: 100%;
}

.header {
  background-color: #ffffff;
  display: flex;
  position: relative;
  width: 100%;
  border-radius: 6px;
  border: 2.5px solid #E71C5B;
  box-sizing: border-box;
}

.businessContainer {
    width: 2.82667rem;
    height: 2.56rem;
    border-radius: 0.16rem;
    box-sizing: border-box;
    position: absolute;
    text-align: center;
    top: -0.05333rem;
    border-right: 0.06667rem solid #ff7300;
}
.businessContainer img{
  // width: 66px;
  height: 50px;
}

.hotContainer {
  width: 100%;
  height: 92px;
  opacity: 1;
  float: right;
  align-items: center;
  display: flex;
/* justify-content: center; */
}
.businessContainer,.hot-number{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}

.hot-number {
  height: 92px;
  text-align: center;
  width: calc(100% - 106px);
  margin-left: 106px;
  font-size: 50px;
  font-family: SourceHanSansCN-Regular-GBpc-EUC-H;
  color: #E71C5B;
  line-height: 1;
}

.desc {
  font-size: 13px;
  font-family: SourceHanSansCN-Regular-GBpc-EUC-H;
  color: #E71C5B;
  letter-spacing: 2px;
  opacity: 1;
  line-height: 1;
  /* margin-top: 11px; */
}

.desc.on {
  margin-top: 0;
}

.hot-tip {
  position: absolute;
  right: 10px;
  top: 10px;
  color: white;
  img {
    width: 16px;
    height: 16px;
  }
}

.van-popup {
  border-radius: 13px;
  width: 274px;

  .search-popup {
    padding: 24px 16px;
    text-align: center;
    padding-bottom: 16px;
    overflow-y: auto;
    .title {
      text-align: justify;
      font-size: 12px;
      color: #5b5b5b;
      line-height: 20px;
      overflow-y: auto;
    }
    .confirm {
      margin: 0 auto;
      padding: 6px 42px;
      background: #E71C5B;
      opacity: 1;
      border-radius: 15px;
      color: #fff;
      display: inline-block;
      margin-top: 20px;
      font-size: 15px;
    }
  }
}

.content {
  padding-left: 27px;
  padding-right: 27px;
  margin-top: 12px;
}

.cell {
  position: relative;
  height: 77px;
  margin-bottom: 5px;
  background-image: url('../../assets/img/hot/资源17.png');
  background-size: 100% 100%;

  .cell-title {
    position: absolute;
    left: 19px;
    top: 13px;
    font-size: 13px;
    font-family: SourceHanSansCN-Regular-GBpc-EUC-H;
    color: #fff;
    opacity: 1;
  }

  .cell-value {
    font-size: 16px;
    font-family: SourceHanSansCN-Medium-GBpc-EUC-H;
    color: #E71C5B;
    opacity: 1;
    position: absolute;
    right: 19px;
    bottom: 7px;
    font-weight: 600;
  }
}
</style>
